<template>
  <div>
    <Artplayer @get-instance="getInstance" :option="option" :style="style" />
  </div>
</template>

<script>
  import Artplayer from './player.vue';

  export default {
    data() {
      return {
        fileList: [
          {
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          },
          {
            name: 'food2.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          },
        ],
        option: {
          url: 'http://192.168.121.135:9000/mahuaide/todo/123.mp4',
          fullscreen: true,
          setting: true,
          flip: true,
          playbackRate: true,
          aspectRatio: true,
          subtitleOffset: true,
          subtitle: {
            url: 'http://192.168.121.135:9000/mahuaide/todo/123.vtt',
            type: 'vtt',
            encoding: 'utf-8',
            escape: true,
            style: {
              'color': '#03A9F4',
              'font-size': '24px',
            },
          },
        },
        style: {
          width: '800px',
          height: '600px',
          margin: '60px auto 0',
        },
      };
    },
    components: {
      Artplayer,
    },
    methods: {
      getInstance(art) {
        console.info(art);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
        );
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
    },
  };
</script>
